;
(function () {
    "use strict"
    // 先判断用户是否登陆
    if (localStorage.getItem("isLogin") !== "ok") {
        alert("请先登录再使用购物车")
        location.href = "./login.html"
    }

    $.ajax({
        type: "get",
        url: "http://localhost:3000/public/header.html ",
        success: function (response) {
            $("#head").html(response);
            // 加载登陆信息
            isLogin();
        }
    });

    // 模块化配置
    require.config({
        baseUrl: "./",
        paths: {
            jq: "./libs/jquery",
            gg: "./modules/getGoods",
            cr: "./modules/cartRender",
            rl: "./modules/resetLocal",
            an: "./modules/allNum",
            ap: "./modules/allPrice"
        }
    });

    require(["jq", "gg", "cr", "rl", "an", "ap"], function (_, getGoods, render, resetLocal, allNum, allPrice) {

        const url = "http://localhost:3000/api";
        const tbody = $("tbody");

        // 1. 获取本地数据
        let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

        // 2. 获取服务器数据
        getGoods(url, res => {
            res = JSON.parse(res).goods1.data;
            // 3. 渲染
            render(goods, res, tbody);

            // 6. 页面渲染完成之后，计算总数量
            $("#allNum").html(allNum(goods));
            // 7. 页面渲染完成之后，计算总价
            $("#allPrice").html(allPrice(goods));
        })

        // 4. 绑定各种事件，开始各种购物车操作
        // 删除当前点击的数据
        tbody.on("click", ".del", function () {
            const id = $(this).parent().attr("index");
            $(this).parent().remove();
            // console.log(id)
            // 5-1. 删除操作同步到本地数据
            resetLocal(goods, id, function (i) {
                goods.splice(i, 1)
            })

            // 删除之后，计算总数量
            $("#allNum").html(allNum(goods));
            // 删除之后，计算总价
            $("#allPrice").html(allPrice(goods));
            // 更新全选
            $("#allCheck")[0].checked = allFlag(goods);
        })

        // 删除选中数据
        // 删除本地选中的数据再渲染
        $("tfoot").on("click", "#delActive", function () {
            // 备份老数据
            const oldDataS = JSON.parse(localStorage.getItem('goods'));
            // 老数据
            let oldData = JSON.parse(localStorage.getItem('goods'));
            // 新数据
            let newData = [];

            // 判断是否全选
            // 选中的数量
            let flagNum = 0;
            for (let i = 0; i < oldData.length; i++) {
                if (oldData[i].flag === 1) {
                    ++flagNum;
                }
            }

            if (flagNum === oldData.length) {
                // console.log("全选")
                localStorage.setItem("goods", newData);
            } else {
                // console.log("不是全选")
                for (let i = 0; i < oldData.length; i++) {
                    if (oldData[i].flag === 1) {
                        // 对老数据进行指定删除
                        oldData.splice(i, 1);
                        // 删除之后存入新数据
                        newData = oldData;
                        // 把新数据设置回去
                        localStorage.setItem("goods", JSON.stringify(newData));
                    }
                }
            }
            // 重新加载
            location.reload();

        })

        tbody.on("input", ".setNum", function () {
            const id = $(this).parent().parent().attr("index");
            const num = $(this).val() - 0;
            // 5-2. 修改操作同步到本地数据
            resetLocal(goods, id, function (i) {
                goods[i].num = num;
            })
            // // 修改之后更新单条对应的总价
            $(this).parent().parent().find(".iAll").text(num * $(this).parent().parent().find(".iPrice").text());
            // 修改之后，计算总数量
            $("#allNum").html(allNum(goods));
            // 修改之后，计算总价
            $("#allPrice").html(allPrice(goods));
        })

        // 单个选中事件
        tbody.on("change", ".check", function () {
            const id = $(this).parent().parent().attr("index");
            // checked是复选框DOM元素的原生DOM属性，注意不要转成jq的DOM
            const flag = this.checked;
            resetLocal(goods, id, function (i) {
                goods[i].flag = Number(flag)
            })
            // 单个选中修改后，同步到全选
            $("#allCheck")[0].checked = allFlag(goods);
            // 修改之后，计算总数量
            $("#allNum").html(allNum(goods));
            // 修改之后，计算总价格
            $("#allPrice").html(allPrice(goods));
        })
        // 初始：单个选中同步到全选
        $("#allCheck")[0].checked = allFlag(goods);

        // 全选事件
        $("#allCheck").change(function () {
            // 全选同步到单个选中，修改本地数据
            goods.forEach(val => {
                val.flag = Number(this.checked);
            })
            localStorage.setItem("goods", JSON.stringify(goods))
            // 全选同步到单个选中，修改DOM
            for (var i = 0; i < $(".check").length; i++) {
                $(".check")[i].checked = this.checked;
            }
            // 修改之后，计算总数量
            $("#allNum").html(allNum(goods));
            // 修改之后，计算总价格
            $("#allPrice").html(allPrice(goods));
            // 再存储到本地
            localStorage.setItem("goods", JSON.stringify(goods))
        })


    })

    // 判断是否需要全选
    function allFlag(goods) {
        return goods.every(val => val.flag)
    }

})();